<template>
  <div class="App">
      <input type="text" placeholder="请输入事件" class="inp" v-model="title" @keyup.enter="add">
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
    name:'NoteHeader',
    props:['addTodo'],
    data() {
      return {
        title:''
      }
    },
    methods:{
      add(){
        if(!this.title.trim()) return alert('输入不能为空')
        const todoObj={id:nanoid(),title:this.title,done:false}
        this.addTodo(todoObj);
        this.title='';
      }
    }
    
}
</script>

<style scoped>
.App {
  width: 400px;
  text-align: center;
}
.inp {
  width: 492px;
  height: 30px;
}
</style>